<template>
    <div>
        <div>
            <van-nav-bar
                    title="详情"
                    left-text="返回"
                    left-arrow
                    @click-left="tzback()"
            />
        </div>
        <div>
            <van-image
                    width="100%"
                    height="160"
                    src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/03/17/163/ias_59120cca6dbbaf040a91d49e52c82286_1135x545_85.jpg"
            />
        </div>
        <!--  图文混排-->
        <div>
            <van-divider content-position="left"
                         :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
            >
                精选写真
            </van-divider>
            <div>
                <van-card v-for="a in articles"
                          :title="a.title"
                          class="goods-card"
                          :thumb="a.imgurl"
                          @click="tzdetail(a.id)"
                >
                    <template #footer>
                        <van-tag plain type="danger" style="margin-right: 2rem">浏览量:{{a.looks}}</van-tag>
                        <van-tag plain type="danger" style="margin-right: 2rem">{{a.ctime}}</van-tag>
                    </template>
                </van-card>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Portrait",
        data(){
            return{
                articles:[]
            }
        },
        mounted() {
            //请求接口，实现文章查询
            this.axios.get("http://localhost:8081/api/portrait/query.do").then(res=>{
                if(res.data.code==200){
                    this.articles=res.data.data;
                }
            })
        },
        methods:{
            tzdetail(id){
                this.$router.push({path:"/portraitDetail",query:{id:id}});
            },
            tzback(){
                history.back();
            }
        }
    }
</script>

<style scoped>

</style>